<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="width: 80%;margin: auto;height: 90%;padding-top: 30px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript"
        src="common/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var now = new Date(); //当前日期
    var year = now.getFullYear();
    var nowMonth = now.getMonth(); //当前月
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var chartDATA = "";
    $.ajax({
        type: 'GET',
        url: '/OASystem/myChart/data',
        async:false,
        data: "",
        dataType: 'json',
        success: function (data) {
            if (data.code == 200) {
                chartDATA = data.data;
            } else {
                alert("操作失败！");
            }
        },
        error: function (msg) {
            alert("服务器异常！");

        }
    });
    option = null;
    option = {
        title: {
            text: 'XX公司员工出勤情况',
            subtext: year + ' 年 ' +(nowMonth+1) + ' 月',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['早退', '迟到', '打卡成功']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: chartDATA,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>